<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品优购商城-综合商城</title>
    <meta name="description" content="品优购商城-综合商城">
    <meta name="keywords" content="品优购商城-iQOO 13,Huawei Pura70,Apple iPhone 14 Pro Max">
    <link rel="stylesheet" href="css/base.css">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
    <!-- section开始部分 -->
    <section class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>
                        <h4>品优购欢迎您！</h4>
                    </li>
                    <li >
                        <h4>
                            请登录&nbsp;&nbsp;
                            <a href="#" class="style_red">免费注册</a>
                        </h4>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#" class="arrow_bottom">我的品优购</a></li>
                    <li><a href="#">品优购会员</a></li>
                    <li><a href="#">企业采购</a></li>
                    <li><a href="#" class="arrow_bottom">关注品优购</a></li>
                    <li><a href="#" class="arrow_bottom">客户服务</a></li>
                    <li><a href="#" class="arrow_bottom">网站导航</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- section   结束 -->
    <!-- header开始部分 -->
    <header class="header w">
        <!-- logo -->
        <div class="logo">
            <a href="index.html" class="logo-link">品优购</a>
        </div>
        <!-- search -->
        <div class="search">
            <form >
                <input type="text" placeholder="语言开发" name="search" class="search_input">
                <button class="search_button" type="submit">搜索</button>
            </form>
        </div>
        <!-- banner -->
        <div class="banner">
            <ul>
                <li><a href="#" class="style_red">优惠购首发</a></li>
                <li><a href="#">亿元优惠</a></li>
                <li><a href="#">9.9团购</a></li>
                <li><a href="#">每满90减30</a></li>
                <li><a href="#">办公用品</a></li>
                <li><a href="#">电脑</a></li>
                <li><a href="#">通信</a></li>
            </ul>
        </div>
        <!-- shopping_cart -->
        <div class="shopping_cart">
            我的购物车
        </div>
    </header>
    <!-- header结束部分 -->
    <!-- nav开始部分 -->
    <nav class="nav">
        <div class="w">
            <div class="category fl">
                <a href="#">全部商品分类</a>
                <ul class="dropdown">
                    <li><a href="#">家用电器</a></li>
                    <li><a href="#">手机、数码、通信</a></li>
                    <li><a href="#">电脑、办公</a></li>
                    <li><a href="#">家具、家具、家装、厨具</a></li>
                    <li><a href="#">男装、女装、童装、内衣</a></li>
                    <li><a href="#">个护化妆、清洁用品、宠物</a></li>
                    <li><a href="#">鞋靴、箱包、珠宝、奢侈品</a></li>
                    <li><a href="#">运动户外、钟表</a></li>
                    <li><a href="#">汽车、汽车用品</a></li>
                    <li><a href="#">母婴、玩具乐器</a></li>
                    <li><a href="#">食品、酒类、生鲜、特产</a></li>
                    <li><a href="#">医药保健</a></li>
                    <li><a href="#">图书、音像、电子书</a></li>
                    <li><a href="#">彩票、旅行、充值、票务</a></li>
                    <li><a href="#">理财、众筹、白条、保险</a></li>
                </ul>
            </div>
            <div class="enumerate">
                <ul>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">美妆馆</a></li>
                    <li><a href="#">传智超市</a></li>
                    <li><a href="#">全球购</a></li>
                    <li><a href="#">闪购</a></li>
                    <li><a href="#">团购</a></li>
                    <li><a href="#">拍卖</a></li>
                    <li><a href="#">有趣</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- nav结束部分 -->
    <!-- main开始部分 -->
    <main class="main w">
        <div class="banner  fl">
            <img src="images/banner_bg.png" alt="banner图片" class="banner_img">
        </div>
        <div class="subColoumn fr">
            <div class="subColumn_table">
                <div class="title">
                    <span class="fl">品优购快报</span>
                    <a href="#" class="more fr">更多</a>
                </div>
                <div class="headline">
                    <ul>
                        <li>
                            <a href="#">
                                <span class="feature">特惠</span>
                                <span class="content"> 备战开学季 全民八折价购数码备战开学季 全民八折价购数码</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="feature">公告</span>
                                <span class="content">品优购占家电网购六成份额</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="feature">特惠</span>
                                <span class="content">百元春节全类礼券限量领</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="feature">公告</span>
                                <span class="content">上品优生鲜 享阳澄湖大闸蟹</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="feature">特惠</span>
                                <span class="content">每日享折扣品优品质游</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <ul>
                    <li>
                        <a href="">
                            <span class="logo_link posx1 posy1"></span>
                            <h4>话费</h4>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span class="logo_link posx2 posy1"></span>
                            <h4>机票</h4>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span class="logo_link posx3 posy1"></span>
                            <h4>电影票</h4>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span class="logo_link posx4 posy1"></span>
                            <h4>游戏</h4>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span class="logo_link posx1 posy2"></span>
                            <h4>彩票</h4>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span class="logo_link posx2 posy2"></span>
                            <h4>加油卡</h4>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span class="logo_link posx3 posy2"></span>
                            <h4>酒店</h4>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span class="logo_link posx4 posy2"></span>
                            <h4>火车票</h4>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span class="logo_link posx1 posy3"></span>
                            <h4>众筹</h4>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span class="logo_link posx2 posy3"></span>
                            <h4>理财</h4>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span class="logo_link posx3 posy3"></span>
                            <h4>礼品卡</h4>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span class="logo_link posx4 posy3"></span>
                            <h4>白条</h4>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="subColumn_img">
                <img src="uploads/ad.jpg" alt="subColumn_img">
            </div>
        </div>
    </main>
    <section class="sidebar">
        <ul>
            <li><a href="#">家用电器</a></li>
            <li><a href="#">收集通讯</a></li>
            <li><a href="#">电脑办公</a></li>
            <li><a href="#">生活用品</a></li>
            <li><a href="#">运动户外</a></li>
            <li><a href="#">汽车用品</a></li>
            <li><a href="#">食品酒类</a></li>
            <li><a href="#">医药保健</a></li>
            <li><a href="#">图书影响</a></li>
            <li><a href="#">金融彩票</a></li>
        </ul>
    </section>
    <section class="w">
        <h4 class="items_title">vivo</h4>
        <div class="list_items">
            <div class="item fl">
                <div class="item_img_box">
                    <img src="uploads/vivox200promini.png" alt="vivo X200 pro mini">
                </div>
                <div class="item_colors">
                    <ul>
                        <li class="color_dot"></li>
                        <li class="color_dot"></li>
                        <li class="color_dot"></li>
                        <li class="color_dot"></li>
                    </ul>
                </div>
                <div class="item_introuction">
                    <h2 class="new_logo">X200 Pro mini </h2>
                    <h3>6.31英寸纤薄小直屏</h3>
                    <div>
                        <a href="#">详情</a>
                        <a href="#">购买</a>
                    </div>
                </div>
            </div>
            <div class="item fl">
                <div class="item_img_box">
                    <img src="uploads/vivos18pro.png" alt="vivos18pro">
                </div>
                <div class="item_colors">
                    <ul>
                        <li class="color_dot"></li>
                        <li class="color_dot"></li>
                        <li class="color_dot"></li>
                        <li class="color_dot"></li>
                    </ul>
                </div>
                <div class="item_introuction">
                    <h2 >S18 Pro</h2>
                    <h3>影棚级人像</h3>
                    <div>
                        <a href="#">详情</a>
                        <a href="#">购买</a>
                    </div>
                </div>
            </div>
            <div class="item fl">
                <div class="item_img_box">
                    <img src="uploads/vivoxfold3.png" alt="vivoxfold3">
                </div>
                <div class="item_colors">
                    <ul>
                        <li class="color_dot"></li>
                        <li class="color_dot"></li>
                        <li class="color_dot"></li>
                        <li class="color_dot"></li>
                    </ul>
                </div>
                <div class="item_introuction">
                    <h2 class="new_logo">X Fold3 </h2>
                    <h3>219g超轻薄</h3>
                    <div>
                        <a href="#">详情</a>
                        <a href="#">购买</a>
                    </div>
                </div>
            </div>
            <div class="item fl">
                <div class="item_img_box">
                    <img src="uploads/iqoo12.png" alt="vivos18pro">
                </div>
                <div class="item_colors">
                    <ul>
                        <li class="color_dot"></li>
                        <li class="color_dot"></li>
                        <li class="color_dot"></li>
                        <li class="color_dot"></li>
                    </ul>
                </div>
                <div class="item_introuction">
                    <h2 >iQOO 12 </h2>
                    <h3>第三代骁龙8</h3>
                    <div>
                        <a href="#">详情</a>
                        <a href="#">购买</a>
                    </div>
                </div>
            </div> 
        </div>
        
    </section>

    <div class="w">
        <h4 class="items_title">Apple</h4>
        <div class="list_items">
            <div class="item fl">
                <div class="item_img_box">
                    <img src="uploads/iphone16pro.png" alt="iphone16pro">
                </div>
                <div class="item_colors">
                    <ul>
                        <li class="color_dot"></li>
                        <li class="color_dot"></li>
                        <li class="color_dot"></li>
                        <li class="color_dot"></li>
                    </ul>
                </div>
                <div class="item_introuction">
                    <h2 class="new_logo">iPhone 16 Pro </h2>
                    <h3>iPhone 巅峰之作</h3>
                    <div>
                        <a href="#">详情</a>
                        <a href="#">购买</a>
                    </div>
                </div>
            </div>
            <div class="item fl">
                <div class="item_img_box">
                    <img src="uploads/iphone16png.png" alt="iphone16">
                </div>
                <div class="item_colors">
                    <ul>
                        <li class="color_dot"></li>
                        <li class="color_dot"></li>
                        <li class="color_dot"></li>
                        <li class="color_dot"></li>
                    </ul>
                </div>
                <div class="item_introuction">
                    <h2 class="new_logo">iPhone 16</h2>
                    <h3>实打实的实力</h3>
                    <div>
                        <a href="#">详情</a>
                        <a href="#">购买</a>
                    </div>
                </div>
            </div>
            <div class="item fl">
                <div class="item_img_box">
                    <img src="uploads/iphone15png.png" alt="iphone15">
                </div>
                <div class="item_colors">
                    <ul>
                        <li class="color_dot"></li>
                        <li class="color_dot"></li>
                        <li class="color_dot"></li>
                        <li class="color_dot"></li>
                    </ul>
                </div>
                <div class="item_introuction">
                    <h2 class="new_logo">iPhone 15 </h2>
                    <h3>浑身都出彩</h3>
                    <div>
                        <a href="#">详情</a>
                        <a href="#">购买</a>
                    </div>
                </div>
            </div>
            
        </div>
        
    </div>
    <!-- main结束部分 -->
    <!-- footer开始 -->
    <footer class="footer">
        <div class="w outline">
            <ul>
                <li>
                    <div class="serve_img serve_img_pos1"></div>
                    <div>
                        <h4>正品保障</h4>
                        <h5>正品保障,提供发票</h5>
                    </div>
                </li>
                <li>
                    <div class="serve_img serve_img_pos2"></div>
                    <div>
                        <h4>极速物流</h4>
                        <h5>极速物流,及时送达</h5>
                    </div>
                </li>
                <li>
                    <div class="serve_img serve_img_pos3"></div>
                    <div>
                        <h4>无忧售后</h4>
                        <h5>7天无理由退换货</h5>
                    </div>
                </li>
                <li>
                    <div class="serve_img serve_img_pos4"></div>
                    <div>
                        <h4>特色服务</h4>
                        <h5>私人定制电套餐</h5>
                    </div>
                </li>
                <li>
                    <div class="serve_img serve_img_pos5"></div>
                    <div>
                        <h4>帮助中心</h4>
                        <h5>您的购物指南</h5>
                    </div>
                </li>
            </ul>
        </div>
        <div class="w detail">
            <ul>
                <li>
                    <div class="text_position">
                        <h4>购物指南</h4>
                        <h5>购物流程</h5>
                        <h5>会员介绍</h5>
                        <h5>生活旅行/团购</h5>
                        <h5>常见问题</h5>
                        <h5>大家电</h5>
                        <h5>联系客服</h5>
                    </div>
                </li>
                <li>
                    <div class="text_position">
                        <h4>配送方式</h4>
                        <h5>上门自提</h5>
                        <h5>24小时限时达</h5>
                        <h5>配送服务查询</h5>
                        <h5>配送收费标准</h5>
                        <h5>海外配送</h5>
                    </div>
                </li>
                <li>
                    <div class="text_position">
                        <h4>支付方式</h4>
                        <h5>货到付款</h5>
                        <h5>在线支付</h5>
                        <h5>分期付款</h5>
                        <h5>邮局汇款</h5>
                        <h5>公司转账</h5>
                    </div>
                </li>
                <li>
                    <div class="text_position">
                        <h4>售后服务</h4>
                        <h5>售后政策</h5>
                        <h5>价格保护</h5>
                        <h5>退款说明</h5>
                        <h5>返修/退换货</h5>
                        <h5>取消订单</h5>
                    </div>
                </li>
                <li>
                    <div class="text_position">
                        <h4>特色服务</h4>
                        <h5>夺宝岛</h5>
                        <h5>DIY装机</h5>
                        <h5>延保服务</h5>
                        <h5>品优购E卡</h5>
                        <h5>品优购通信</h5>
                    </div>
                </li>
                <li>
                    <div class="text_position">
                        <h4>帮助中心</h4>
                        <img src="images/QR_code.png" alt="品优购二维码" class="QR_code">
                        <h5>品优购客户端</h5>
                    </div>
                </li>  
        </div>
        <div class="w connection">
            <div class="consultant">
                <ul>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">联系客服</a></li>
                    <li><a href="#">商家入驻</a></li>
                    <li><a href="#">营销中心</a></li>
                    <li><a href="#">手机品优购</a></li>
                    <li><a href="#">友情联接</a></li>
                    <li><a href="#">销售中心</a></li>
                    <li><a href="#">品优购社区</a></li>
                    <li><a href="#">品优购公益</a></li>
                    <li><a href="#">English Site</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="copyright">
                <ul>
                    <li>地址 : 浙江省杭州市浙江财经大学</li>
                    <li>邮编 : 320018</li>
                    <li>电话 : 400-618-4000</li>
                    <li>传真 : 010-82935100</li>
                    <li>邮箱 : zufe@edu.com</li>
                </ul>
            </div>
            <div class="copyright">
                <ul>
                    <li>Copyright © 2004 - 2020 品优购版权所有</li>
                    <li>京ICP备08001088号</li>
                    <li>京公网安备110100604688号</li>
                </ul>
            </div>
        </div>
    </footer>
    <!-- footer结束 --> 
</body>

</html>